<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		body{
			background: #aaa;
			text-align: center;
		}
		canvas{
			background: #fff;
		}
	</style>
</head>

<body>
	<canvas id="cans" width="800px" height="800px">
		
	</canvas>
	<input type="button" id="btn" value="清空画布" name="">
	<input type="color" id="color" name="">
	
  <script>
		window.onload=function(ev){
			let clear = document.getElementById('btn');
			let cans=document.getElementById('cans');
			let oColor=document.getElementById('color');

			let cs=cans.getContext('2d');
			let isdraw=false;
			let lastX,lastY;


			let colors='black';	//记录初始颜色
			oColor.onchange=function(){
				// alert(this.value);
				colors=this.value;//选择改变线条颜色
			}

			cans.onmousedown=function(ev){
				isdraw=true;
				lastX=ev.offsetX;
				lastY=ev.offsetY;
				cans.onmousemove=function(ev){
					if(isdraw){		
						cs.beginPath();
						cs.moveTo(lastX,lastY);
						cs.lineTo(ev.offsetX,ev.offsetY);

						lastX=ev.offsetX;
						lastY=ev.offsetY;

						cs.strokeStyle=colors;
						cs.stroke();
					}
				}
				// cans.height=cans.height;//清空
			}
			cans.onmouseup=function(){
				isdraw=null;
				cs.onmousedown=null;
				cs.onmousemove=null;
			};
			clear.addEventListener('click',function(){
				cans.height=cans.height;
			})
		}
  </script>
</body>
</html>
